<template>
  <div
    v-if="Object.keys(site).length"
    class="nav-wrap"
  >
    <div class="nav flex-center-between relative z2">
      <div class="flex items-center">
        <img
          class="cp"
          :src="site.logo"
          alt=""
        >
        <a-menu
          v-if="!isMobile"
          v-model="current"
          mode="horizontal"
          style="border:none"
        >
          <a-menu-item
            v-for="(item) in nav"
            :key="item.path.substring(1)"
            @click="handleTo(item)"
          >
            {{ item.title }}
          </a-menu-item>
        </a-menu>
      </div>
      <div class="flex-center">
        <img
          class="cp"
          :src="site.icon.gouwuche"
          alt=""
        >
        <img
          v-if="isMobile"
          class="ml10"
          :src="showMobileNav ? site.icon.close : site.icon.more"
          alt=""
          @click="showMobileNav = !showMobileNav"
        >
      </div>
    </div>
    <div
      v-if="showMobileNav"
      class="nav__mobile absolute l0 width-100 bg-fff z1"
    >
      <div
        v-for="(item, i) in nav"
        :key="i"
        @click="handleTo(item)"
        style="line-height:60px"
        class="pl10 bd bb bd-f2"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: [location.hash.substring(1)],
      nav: [],
      showMobileNav: false
    }
  },

  async created () {
    console.log(this.current)
    this.nav = await this.fetch('/nav.json')
    // const curNav = this.nav.find(x => x.path === `.${this.current[0]}`)
    // await this.$nextTick()
    // const li = document.querySelectorAll('.ant-menu-item')
    // Array.from(li).forEach(item => {
    //   if (item.innerText.includes(curNav.title)) {
    //     item.classList.add('ant-menu-item-selected')
    //   }
    // })
  },

  methods: {
    handleTo (item) {
      // console.log(item)
      this.showMobileNav = false
      this.$router.push(item.path)
    }
  }
}
</script>

<style lang="less">
.nav-wrap {
  position: sticky!important;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background: #fff;
}
.pc {
  @height: 80px;
  .nav {
    height: @height;
    box-shadow: 0 5px 5px rgba(0,0,0,.05);
    padding: 0 20px;
    .ant-menu-horizontal {
      line-height: @height;
      margin-left: @height;
    }
  }
  //.container {
  //  height: calc(100vh - 80px);
  //}
}
.mobile {
  @height: 50px;
  .nav {
    height: @height;
    box-shadow: 0 5px 5px rgba(0,0,0,.05);
    padding: 0 20px;
  }
  .nav__mobile {
    top: @height;
    padding-bottom: 80px;
  }
}
.ant-menu-horizontal li.ant-menu-item:hover,
.ant-menu-horizontal > li.ant-menu-item-selected {
  color: #479891;
  border-bottom: 2px solid #479891;
}
</style>
